<template>
    <div id="app">
        <!--搜索框-->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <!--员工姓名框-->
            <el-form-item label="部门名称">
                <el-input v-model="formInline.name" placeholder="部门名称"></el-input>
            </el-form-item>
            <!--时间选择框-->
            <el-form-item label="创建时间">
                <el-date-picker
                        v-model="formInline.createTime"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>

        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="编号"
                    width="100">
            </el-table-column>

            <el-table-column
                    prop="name"
                    label="名称">
            </el-table-column>

            <el-table-column
                    prop="backg"
                    label="支部背景">
            </el-table-column>

            <el-table-column
                    prop="intro"
                    label="支部介绍">
            </el-table-column>

            <el-table-column
                    prop="createTime"
                    label="创建时间">
            </el-table-column>

            <el-table-column
                    prop="status"
                    label="状态">
                <template slot-scope="scope">
                    <p v-if="scope.row.status=='0' " style="color: red">
                        异常
                    </p >
                    <p v-else-if="scope.row.status=='1'" style="color: lightgreen">
                        正常
                    </p >
                </template>
            </el-table-column>

        </el-table>

        <div style="padding: 10px 0">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

    </div>
</template>

<script>
    export default {
        name: "selectBranch",
        data(){
            return{
                tableData:{},
                currentPage:1,
                total:0,
                pageSize:5,
                formInline:{},
            }
        },
        created(){
            this.initTable();
        },
        methods:{
            handleSizeChange(val) {
                this.pageSize=val;
                this.initTable();
            },
            handleCurrentChange(val) {
                this.currentPage=val;
                this.initTable();
            },
            onSubmit(){
                this.initTable();
            },
            initTable(){
                this.$http.post("/system/branch/selectAllBranch?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.formInline).then(resp=>{
                    if(resp.data.code===200){
                        this.tableData=resp.data.data.list;
                        this.total=resp.data.data.total;
                    }

                });
            }
        }
    }
</script>

<style scoped>
    html,body,#app{
        margin: 0px;
        padding: 0px;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 500px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
    }

    body > .el-container {
        margin-bottom: 40px;
    }
    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>